<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <link href="/assets/index/css/mui/mui.min.css" rel="stylesheet" />
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
            font-family: 'Microsoft YaHei';
        }

        .mui-bar {
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        #done.mui-disabled {
            color: gray;
        }
        .mui-search input[type=search]{
            margin-bottom:0px;
        }

        .mui-search:before{
            top:68%;
        }

        .mui-table-view .mui-table-view-cell a{
            display: flex;
        }

        .mui-table-view .mui-table-view-cell .thumb{
            flex-shrink: 0;
            width:35%;
            margin-right:2%;
        }

        .mui-table-view .mui-table-view-cell .mui-media-object{
            width:100%;
            height:100%;
            max-width:100%;
        }

        .mui-media-body{
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }

        .mui-media-body .title{
            color:#000;
            width:100%;
            font-weight:bold;
            font-size:1.2em;
        }

        .mui-media-body .content{
            width:100%;
        }

        .mui-media-body .info{
            width:100%;
            display: flex;
            justify-content: space-between;
            align-content: center;
            align-items: center;
        }

        .mui-media-body .info .like{
            color:skyblue;
            font-weight: bold;
        }

        .mui-media-body .info .price{
            color:red;
            font-weight: bold;
            margin-top:3px;
        }

        .nomore{
            width: 100%;
            text-align: center;
            font-weight: bold;
            margin:2em 0px;
        }
    </style>
    <title>视频搜索</title>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">搜索课程</h1>
    </header>
    <form method="get" action:"{:url('/index/subject/search')}">
        <div class="mui-content" style="margin-top:50px;margin-bottom:5px;">
            <!-- MUI 搜索框 -->
            <div class="mui-input-row mui-search" id="searchForm">
                <input type="search" name="indexSearch" id="searchInput" onkeyup="enterSearch(event)" class="mui-input-clear" placeholder="
                    {if condition="$search"}
                        {$search}
                    {else /}
                        
                    {/if}
                ">
            </div>
        </div>
        {if condition="$search_bool"}
            <div class="nomore">
                暂未查找到你想要的课程，可以看看下面推荐
            </div>
        {else /}

        {/if}
        {if condition="$sublist"}
            <ul class="mui-table-view">
                {foreach $sublist as $item}
                <li class="mui-table-view-cell mui-media">
                    <a href="{:url('/home/subject/subject',['subid' => $item['id']])}">
                        <div class="thumb">
                            <img class="mui-media-object mui-pull-left" src="{$item.thumbs}">
                        </div>
                        <div class="mui-media-body">
                            <h5 class="title">{$item.title}</h5>
                            <p class='content'>{$item.content}</p>
                            <p class='info'>
                                <span class="like">
                                    <span class="mui-icon mui-icon-starhalf"></span>
                                    点赞：
                                </span>
                                <span class="price">￥{$item.price}</span>
                            </div>
                        </div>
                    </a>
                </li>
                {/foreach}
            </ul>
        {else /}
        
        {/if}
    </form>
{include file="common/footer" /}
</body>
</html>
    <script src="/assets/index/js/mui.min.js"></script>
    <script src="/assets/index/js/mui.indexedlist.js"></script>
    <script type="text/javascript" charset="utf-8">
    </script>
